<template>
  <div class="info-box" v-if="Object.keys(shop).length != 0">
    <div class="shop-head">
      <img class="shop-img" :src="shop.shopImg | actualurl" alt="">
      <span>{{shop.shopName}}</span>
    </div>
    <div class="shop-content">
      <div class="shop-info shop-info-left">
        <table>
          <tr>
            <td>{{shop.saleCount}}</td>
            <td>99</td>
          </tr>
          <tr>
            <td>总销量</td>
            <td>全部宝贝</td>
          </tr>
        </table>
      </div>
      <div class="shop-info shop-info-right">
        <table>
          <tr>
            <td>描述相符</td>
            <td class="evaluate-score" :class="{highScore:4.64 > 4.8}">4.64</td>
            <td class="evaluate" :class="{highScore2:4.64 > 4.8}">低</td>
          </tr>
          <tr>
            <td>价格合理</td>
            <td class="evaluate-score" :class="{highScore:5 > 4.8}">5</td>
            <td class="evaluate" :class="{highScore2:5 > 4.8}">高</td>
          </tr>
          <tr>
            <td>质量满意</td>
            <td class="evaluate-score" :class="{highScore:4.64 > 4.8}">4.62</td>
            <td class="evaluate" :class="{highScore2:4.64 > 4.8}">低</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {

      }
    },
    props:{
      shop:{}
    },
    filters: {
      actualurl(value) {
        return "http://dev.api.sqiandai.com" + value;
      },
      tomoney(value) {
        return "$ " + value
      }
    },
  }
</script>

<style scoped="scoped">
  .info-box {
    margin: 5px;
  }
  .shop-head{
    display: flex;
    align-items: center;
    margin: 15px 5px;
  }
  .shop-img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 10px;
  }
  .shop-content{
    display: flex;
  }
  .shop-info{
    width: 50%;
    text-align: center;
    display: flex;
    align-items: center;
  }
  .shop-info-left table{
    border-right: 1px solid gray;
  }
  table {
    width: 100%;
    text-align: center;
  }
  .evaluate-score{
    color: green;
  }
  .evaluate{
    background-color: green;
    color: white;
  }
  .highScore{
    color: red;
  }
  .highScore2{
    background-color: red;
  }
</style>
